<script setup>
import { ref } from 'vue'
import ServerTable from '@/components/Tables/ServerTable.vue'
import { generateRandomString } from '@/utils/mockData'

// 生成10条Worker节点数据
const workerNodes = ref(
  Array.from({ length: 10 }, () => ({
    id: generateRandomString(10),
    os: 'Linux',
    bootTime: new Date().toLocaleString(),
    cpu: 32,
    memory: 512,
    version: 'v1.2.3',
    enabled: true
  }))
)

// 生成Worker节点URL
const workerUrl = ref('')
const generateWorkerUrl = () => {
  workerUrl.value = `https://${generateRandomString(30)}.worker.prod.example.com`
}
</script>

<template>
  <div class="schedule-view">
    <!-- 操作区 -->
    <div class="action-bar">
      <button class="generate-btn" @click="generateWorkerUrl">Add Worker Node</button>
      <span v-if="workerUrl" class="url-display">{{ workerUrl }}</span>
    </div>

    <!-- 节点列表 -->
    <div class="node-list">
      <h3>Worker节点列表（共 {{ workerNodes.length }} 个）</h3>
      <ServerTable 
        :data="workerNodes"
        :columns="['节点ID', '操作系统', '启动时间', 'vCPU', '内存(GB)', '版本', '状态']"
      />
    </div>
  </div>
</template>

<style scoped>
.schedule-view {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
}

.action-bar {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 20px;
}

.generate-btn {
  background: #409eff;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.url-display {
  font-family: monospace;
  color: #67c23a;
  font-size: 14px;
}

.node-list {
  border: 1px solid #ebeef5;
  border-radius: 6px;
  padding: 16px;
}

@media (max-width: 768px) {
  .action-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .url-display {
    word-break: break-all;
  }
}
</style>
